<template>
    <div class="contractDetail">
        <div class="editButtons">
            <el-button type="primary" plain icon="ArrowLeft" @click="cancel">返回</el-button>
        </div>
        <!-- 大品牌免签查看详情只展示基础信息 -->
        <el-card style="margin-bottom: 20px;">
            <template #header>
                <div class="card_title">基础信息</div>
            </template>
            <div class="details">
                <div class="details_top">
                    <el-statistic title="货品总数" :value="Number(detailInfo.productsCount || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="上架总数" :value="Number(detailInfo.productsShopping || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="选品总数" :value="Number(detailInfo.productsOpt || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="已超期" :value="Number(detailInfo.productsOverTime || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="待收货" :value="Number(detailInfo.productsWait || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="待送审" :value="Number(detailInfo.productsWaitAudit || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="待入库" :value="Number(detailInfo.productsWaitHouse || 0)" />
                    <el-divider direction="vertical" />
                    <el-statistic title="待议价" :value="Number(detailInfo.productsWaitPrice || 0)" />
                </div>
                <el-divider />
                <el-descriptions :column="3" border>
                    <el-descriptions-item label="供应商">
                        <div class="value">
                            <div class="valuex_icon" v-if="detailInfo?.bigBrandStatus == 1">免签</div>
                            <div class="valuex_name">{{ detailInfo.supplierName }}</div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="供应商别称">
                        <div class="value">
                            <div class="valuex_icon" v-if="detailInfo?.bigBrandStatus == 1">免签</div>
                            <div class="valuex_name">{{ detailInfo.supplierName }}</div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="统一社会信用代码">{{ detailInfo.companyCode }}</el-descriptions-item>
                    <el-descriptions-item label="商品类目">{{ handleExtraData(detailInfo.extraData)
                        }}</el-descriptions-item>
                    <el-descriptions-item label="商家类型">{{ detailInfo.supplierType }}</el-descriptions-item>
                    <el-descriptions-item label="厂家地址">{{ detailInfo.addr }}</el-descriptions-item>
                    <el-descriptions-item label="联系人">{{ detailInfo.contactName }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ detailInfo.phone }}</el-descriptions-item>
                    <el-descriptions-item label="详细地址">{{ detailInfo.address }}</el-descriptions-item>
                    <el-descriptions-item label="店铺类型">{{ detailInfo.storeType }}</el-descriptions-item>
                    <el-descriptions-item label="店铺id">{{ detailInfo.storeId }}</el-descriptions-item>
                    <el-descriptions-item label="店铺评分">{{ detailInfo.storeGrade }}</el-descriptions-item>
                    <el-descriptions-item label="营业执照">
                        <div class="value">
                            <image-preview :src="detailInfo.businessImage" :width="110" :height="110" />
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="营业执照有效期">{{ detailInfo.businessDate }}</el-descriptions-item>
                    <el-descriptions-item label="营业执照所在地">{{ detailInfo.businessAddr }}</el-descriptions-item>
                    <el-descriptions-item label="其他资质">
                        <div class="value">
                            <image-preview style="margin-right: 10px;"
                                v-for="(item, index) in detailInfo?.otherImage?.split(',')" :key="index" :src="item"
                                :width="110" :height="110" />
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- <div class="details_line">
                    <div class="label">营业执照有效期</div>
                    <div class="value">{{ detailInfo.businessDate }}</div>
                </div> -->
            </div>
        </el-card>

        <el-card style="margin-bottom: 20px;" v-if="query.type !== 'bigBrand'">
            <template #header>
                <div class="card_title">
                    <span>主体信息</span>
                </div>
            </template>
            <div class="company">
                <div class="company_item" v-for="(item, index) in dataSource" :key="index">
                    <div class="company_item_title">主体{{ index + 1 }}</div>
                    <el-tree style="width: 600px" :data="item" node-key="id" default-expand-all
                        :expand-on-click-node="false" :props="defaultProps">
                        <template #default="{ node, data }">
                            <div class="company_box">
                                <div class="company_box_name">
                                    <img class="company_box_img"
                                        :src="node.level === 1 ? icon_zhutigongsi : node.level === 2 ? icon_zhutidianpu : icon_dianpu"
                                        alt="">
                                    <span
                                        :class="{ company_box_text: true, fontWeight900: node.level === 1, fontWeight500: node.level === 2 }"
                                        v-if="node.level !== 3">{{
                                            node.label
                                        }}</span>
                                    <span class="company_box_text" v-else>{{ node.label }}({{ node.data.storeId
                                        }})</span>
                                </div>
                            </div>
                        </template>
                    </el-tree>
                </div>
                <div class="company_noData" v-if="!dataSource.length">暂无数据</div>
            </div>
        </el-card>

        <el-card style="margin-bottom: 20px;" v-if="query.type !== 'bigBrand'">
            <template #header>
                <div class="card_title">合同信息</div>
            </template>
            <el-table :data="tableData" style="width: 100%;height: auto;min-height: 200px;">
                <el-table-column label="合同类型" prop="type" show-overflow-tooltip />
                <el-table-column label="合同名称" prop="name" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.Name }}
                    </template>
                </el-table-column>
                <el-table-column label="签订时间" prop="qdtime" show-overflow-tooltip />
                <el-table-column label="上传时间" prop="sctype" show-overflow-tooltip />
                <el-table-column label="操作人" prop="czr" show-overflow-tooltip />
                <el-table-column label="备注" prop="bz" show-overflow-tooltip />
                <el-table-column label="保证金金额" prop="bzjje" show-overflow-tooltip />
                <el-table-column label="交保证金时间" prop="bzjtime" show-overflow-tooltip />
                <el-table-column label="是否完成" prop="sfwc" show-overflow-tooltip />
                <el-table-column label="对账专用区" prop="dzzyq" show-overflow-tooltip />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" @click="preview(scope.row.url)">预览</el-button>
                        <el-button link type="primary" @click="preview(scope.row.url)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card v-if="query.type !== 'bigBrand'">
            <template #header>
                <div class="card_title">
                    <spam>品牌信息</spam>
                </div>
            </template>
            <el-table v-loading="loading" :data="brandList" style="width: 100%;height: auto;min-height: 200px;">
                <el-table-column label="品牌名称" align="center" prop="brandName" />
                <el-table-column label="品牌商标注册证" align="center" prop="brandImage">
                    <template #default="scope">
                        <image-preview :src="scope.row.brandImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="商标授权使用证明" align="center" prop="usageImage">
                    <template #default="scope">
                        <image-preview :src="scope.row.usageImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="使用授权品类" align="center" prop="usages">
                    <template #default="scope">
                        {{ handleFilterMultiple(scope.row.usages, hm_trademark) }}
                    </template>
                </el-table-column>
                <el-table-column label="店铺销售授权" align="center" prop="sellImage">
                    <template #default="scope">
                        <image-preview :src="scope.row.sellImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="销售授权品类" align="center" prop="sells">
                    <template #default="scope">
                        {{ handleFilterMultiple(scope.row.sells, hm_trademark) }}
                    </template>
                </el-table-column>
                <el-table-column label="其他资质补充" align="center" prop="otherImage">
                    <template #default="scope">
                        <image-preview :src="scope.row.otherImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
                <el-table-column label="联名款或其他授权文件" align="center" prop="jointlyImage">
                    <template #default="scope">
                        <image-preview :src="scope.row.jointlyImage" :width="50" :height="50" />
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- <div class="contract_div">
            <div class="contract_item">
                <div class="contract_item_font">供销合同</div>
                <div class="contract_item_name">{{ contractSellName }}</div>
                <div v-if="contractSellName !== '-'" class="button_list">
                    <div class="preview buttons" @click="preview(contractSellUrl)">预览</div>
                    <div class="dowload buttons" @click="dowload(contractSellOssId)">下载</div>
                </div>
            </div>
            <div class="contract_item">
                <div class="contract_item_font">破价合同</div>
                <div class="contract_item_name">{{ contractDiscountName }}</div>
                <div v-if="contractDiscountName !== '-'" class="button_list">
                    <div class="preview buttons" @click="preview(contractDiscountUrl)">预览</div>
                    <div class="dowload buttons" @click="dowload(contractDiscountOssId)">下载</div>
                </div>
            </div>
            <div class="contract_item">
                <div class="contract_item_font">保证金协议</div>
                <div class="contract_item_name">{{ marginName }}</div>
                <div v-if="marginName !== '-'" class="button_list">
                    <div class="preview buttons" @click="preview(marginNameUrl)">预览</div>
                    <div class="dowload buttons" @click="dowload(marginNameUrlssId)">下载</div>
                </div>
            </div>
            <div class="contract_item">
                <div class="contract_item_font">补充协议</div>
                <div class="contract_item_name">{{ supplementaryName }}</div>
                <div v-if="supplementaryName !== '-'" class="button_list">
                    <div class="preview buttons" @click="preview(supplementaryUrl)">预览</div>
                    <div class="dowload buttons" @click="dowload(supplementaryOssId)">下载</div>
                </div>
            </div>
            <div class="contract_item">
                <div class="contract_item_font">包销合同</div>
                <div class="contract_item_name">{{ underwriteName }}</div>
                <div v-if="underwriteName !== '-'" class="button_list">
                    <div class="preview buttons" @click="preview(underwriteUrl)">预览</div>
                    <div class="dowload buttons" @click="dowload(underwriteOssId)">下载</div>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script setup name="contractDetail" lang="ts">
const { proxy } = getCurrentInstance() as any;
import { BrandVO } from '@/api/system/brand/types';
import { hmSupplierList } from '@/api/group/supplier/index';
import { SupplierDetail } from '@/api/group/supplier/types';
import { handleFilterMultiple } from '@/utils/handleFilters';
import { listBrand } from '@/api/system/brand';
import useUserStore from '@/store/modules/user';
import { number } from 'echarts';
import icon_zhutigongsi from '@/assets/images/icon_zhutigongsi.png'
import icon_zhutidianpu from '@/assets/images/icon_zhutidianpu.png'
import icon_dianpu from '@/assets/images/icon_dianpu.png'
const { roles } = useUserStore();
const route = useRoute();
const router = useRouter();
const { query } = route;
const detailInfo = ref<SupplierDetail>({});


// 供销合同名称
const contractSellName = ref<string>('-');
const contractSellUrl = ref<string>('');
const contractSellOssId = ref<string | number>('');
// 破价合同名称
const contractDiscountName = ref<string>('-');
const contractDiscountUrl = ref<string>('');
const contractDiscountOssId = ref<string | number>('');
// 保证金协议名称
const marginName = ref<string>('-');
const marginNameUrl = ref<string>('');
const marginNameUrlssId = ref<string | number>('');
// 补充协议名称
const supplementaryName = ref<string>('-');
const supplementaryUrl = ref<string>('');
const supplementaryOssId = ref<string | number>('');
// 包销合同名称
const underwriteName = ref<string>('-');
const underwriteUrl = ref<string>('');
const underwriteOssId = ref<string | number>('');

const { hm_trademark } = toRefs<any>(proxy?.useDict('hm_trademark'));
// 数结构props配置项
const defaultProps = {
    children: 'children',
    label: 'name'
}
// 主体存储数据 
const dataSource = ref<any>([])
const tableData = ref([])
const brandList = ref<BrandVO[]>([]);
const loading = ref(true);

/** 根据合同类型获取合同名称 */
const contractNameByType = async (type: string, row: any) => {
    if (row) {
        const rows = row.filter((item: any) => item.contractType == type);
        if (rows.length > 0) {
            if (type == '供销合同') {
                contractSellUrl.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
                contractSellOssId.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
            } else if (type == '破价合同') {
                contractDiscountUrl.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
                contractDiscountOssId.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
            } else if (type == '保证金协议') {
                marginNameUrl.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
                marginNameUrlssId.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
            } else if (type == '补充协议') {
                supplementaryUrl.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
                supplementaryOssId.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
            } else if (type == '包销合同') {
                underwriteUrl.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
                underwriteOssId.value = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile;
            }
            return rows[0].fileName;
        } else {
            return '-';
        }
    } else {
        return '-';
    }
};
/** 获取供应商详情 */
const supplierDetail = async () => {
    const res = await hmSupplierList({ id: query.supplierId });
    detailInfo.value = res.rows[0];
    contractSellName.value = await contractNameByType('供销合同', detailInfo.value.contractList);
    contractDiscountName.value = await contractNameByType('破价合同', detailInfo.value.contractList);
    marginName.value = await contractNameByType('保证金协议', detailInfo.value.contractList);
    supplementaryName.value = await contractNameByType('补充协议', detailInfo.value.contractList);
    underwriteName.value = await contractNameByType('包销合同', detailInfo.value.contractList);
    /** 查询品牌列表 */
    loading.value = true;
    const resposne = await listBrand({ supplierId: query.supplierId as string });
    brandList.value = resposne.rows;
    loading.value = false;
};
/** 品类回显 */
const handleExtraData = (data: any) => {
    if (data) {
        const list: any[] = [];
        data.forEach((element: any) => {
            if (list.indexOf(element.type) == -1) {
                list.push(element.type);
            }
        });
        return list.join(',');
    }
};
/** 预览 */
const preview = (url: string) => {
    window.open(url);
};
/** 下载 */
const dowload = (ossId: any) => {
    window.open(ossId, '_blank');
};
/** 取消修改供应商 */
const cancel = () => {
    proxy?.$tab.closePage(route).then(() => {
        router.go(-1)
    })
};
onMounted(() => {
    supplierDetail();
});
</script>
<style scoped lang="scss">
.contractDetail {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .card_title {
        font-weight: 700;
        color: var(--el-text-color-regular);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .details {
        width: 100%;

        .details_top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 20px;
        }

        .details_line {
            width: 100%;
            display: flex;
            margin-bottom: 20px;

            .label {
                width: 130px;
                text-align: right;
                color: var(--el-text-color-regular);
                box-sizing: border-box;
                font-size: var(--el-form-label-font-size);
                font-weight: 700;
            }

            .value {
                flex: 1;
                display: flex;
                word-break: break-all;
                margin-left: 20px;
            }
        }
    }

    .editButtons {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .company {
        width: 100%;
        padding: 0 0 20px 0;
        overflow-x: auto;
        display: flex;

        .company_noData {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
        }

        .company_item {
            border: 1px solid #ebeef5;
            padding: 10px;
            margin-right: 20px;

            .company_item_title {
                padding: 5px 10px 10px;
                border-bottom: 1px solid #ebeef5;
                font-size: 16px;
                color: var(--el-text-color-regular);
                font-weight: 700;
                margin-bottom: 10px;
            }
        }

        .company_box {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .company_box_name {
                flex: 1;
                min-width: 0;
                display: flex;
                align-items: center;

                .company_box_img {
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                }

                .company_box_text {
                    flex: 1;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 10px;

                }

                .fontWeight900 {
                    font-weight: 900;
                }

                .fontWeight500 {
                    font-weight: 600;
                }
            }

            .company_box_button {
                display: flex;
            }
        }
    }
}
</style>